<template>
    <div class="departmenttree-container">
        <div class="department-item" :class="{'is-top':isTop}">
            <div class="department-name">
                <template v-if="showChildren">
                    <span v-if="department.children" class="iconfont iconarrow-down" @click="troggleChildren"></span>
                </template>
                <template v-else>
                    <span v-if="department.children" class="iconfont iconarrow-right" @click="troggleChildren"></span>
                </template>
                <span>
                    {{department.name}}
                </span>
                <span>
                    ( {{department.number}}人 )
                </span>
            </div>

            <div class="children" :class="{'show-children':showChildren,'hide-children':!showChildren}" v-if="department.children" ref="children">
                <div class="children-item" v-for="item of department.children" :key="item.id">
                    <template v-if="item.children">
                        <DepartmentTree :department="item" :isTop="false"></DepartmentTree>
                    </template>
                    <template v-else>
                        <div class="children-name">
                            <span>
                                {{item.name}}
                            </span>
                            <span>
                                ( {{item.number}}人 )
                            </span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DepartmentTree',
    props: {
        department:Object,
        isTop:Boolean,
    },
    data() {
        return { 
            showChildren:true,
            childrenHeight:0
        }
    },
    mounted() {
    },
    methods: {
        troggleChildren() {
            this.showChildren = !this.showChildren;
        },
    }
}
</script>
<style lang="less" scoped>
.departmenttree-container {
    width:100%;
    height:100%;
    .department-item {
        width: 100%;
        line-height:40px;
        line-height:40px;
        .department-name {
            border-bottom: 1px solid #efefef;
        }
        .children {
            margin-left:40px;
            .children-name {
                border-bottom: 1px solid #efefef;
            }
        }
        .show-children {
            display:block;
        }
        .hide-children {
            display:none;
        }
    }
    .is-top {
        margin-left: 20px;
    }
}



// .show-children {
//     animation-name: showchildren;
// }

// .hide-children {
//     animation-name: hidechildren;
// }

// @keyframes showchildren {
//     0% {
//         height: 0;
//     }
//     100% {
//         height: 328px;
//     }
// }
// @keyframes hidechildren {
//     0% {
//         height: 328px;
//     }
//     100% {
//         height: 0;
//     }
// }
</style>